// Copyright 2019 The Cockroach Authors.
//
// Use of this software is governed by the Business Source License
// included in the file licenses/BSL.txt.
//
// As of the Change Date specified in that file, in accordance with
// the Business Source License, use of this software will be governed
// by the Apache License, Version 2.0, included in the file
// licenses/APL.txt.

// This is an attempt to override settings from the react-select component.
// react-select's css file uses rules with extremely high specificity, making
// numerous !important statements necessary.
// @stylint off
.has-value.Select--single > .Select-control .Select-value .Select-value-label,
.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label
  color $link-color !important

.Select-option
  padding 10px 25px !important
  &.is-selected
    color $link-color !important

.Select-value, .Select-placeholder
  line-height inherit !important
  height auto !important
  position relative !important
  white-space nowrap !important
  max-width 250px !important

.Select-control
  line-height inherit !important
  height auto !important
  border-width 0 !important
  box-shadow 0 0 0 black !important
  border-radius 0 3px 3px 0 !important
  background-color transparent !important
  width auto !important 

.Select-input
  line-height inherit !important
  height auto !important
  position absolute !important
  top 0 !important

.Select-input > input
  padding 0 !important

.Select-menu-outer
  width auto !important
  top calc(100% + 21px) !important
  border none !important
  box-shadow 0 2px 4px rgba(0, 0, 0, .2) !important
  max-height 200px !important
  font-family Lato-Regular
  font-size 14px
  text-transform none
  letter-spacing 0
  border-radius 4px !important
  padding 0 0

.Select-menu, .Select-menu-outer
  max-height 350px !important

.Select-value-label
  display block !important
  cursor pointer

.Select-arrow
  border-top-color $link-color !important

.Select
  display block
  width 100%

.dropdown--side-arrows
  .Select
    padding 12px 24px !important
  .Select-arrow-zone
    display none

// NVD3 Style overrides.
.nvtooltip
  font-family Lato-Regular !important
  color $body-color !important
  padding 15px 20px !important
  background rgba(255, 255, 255, .98) !important
  border-radius 5px !important
  border 1px solid rgba(0, 0, 0, .1) !important
  box-shadow 0px 0px 4px rgba(0, 0, 0, .2)

.nvtooltip table
  margin 0 !important

.nvtooltip .legend-color-guide div
  width 7px !important
  height 7px !important
  border-radius 50% !important
  border none !important

.nvtooltip table tr.highlight td
  padding 2px 9px 2px 0 !important
  border none !important

.nvtooltip table tr.highlight td:first-child
  padding 2px 9px 2px 3rem

.nvtooltip strong
  font-weight 400 !important

.legend-subtext
  color $tooltip-color !important
  font-weight 300

.nvd3 .nv-axis
  .tick line
    stroke $table-border-color

  text
    fill $headings-color
    font-family Lato-Regular
    font-size 11px

  .nv-axislabel
    font-family Lato-Regular
    fill $headings-color

.nv-y .nv-axis .domain
  opacity 0

.nvd3 text
  opacity .6
  font-size 10px

.ant-divider
  background $button-border-color
  margin-left 0
  margin-right 22px
  &.ant-divider-vertical
    height auto

.ant-tooltip
  .ant-tooltip-inner
    font-size 12px
    border-radius 4px
    background-color $body-color
    font-family Lato-Regular
    color #fff
    box-shadow none
    padding 5px 8px
    min-width 0
    min-height 0
  &.preset-black
    .ant-tooltip-inner
      background-color #000
      pre
        font-family RobotoMono-Medium
        font-size 12px
        color #e7ecf3
        letter-spacing 0.7px
        line-height 24px
        ._text-bold
          font-family RobotoMono-Bold
          color #8dbcff

.ant-input, .ant-time-picker-input
  height 40px
  padding 0px 11px
  border-radius 3px
  border solid 1px $button-border-color
  &:focus
    border solid 1px $link-color
    box-shadow none
  &:hover
    border-color $link-color

.ant-time-picker-panel-combobox
  display flex

.ant-calendar-picker:hover .ant-calendar-picker-input:not(.ant-input-disabled)
  border-color $link-color

.ant-fullcalendar-header
  padding: 10px 4px
  text-align: center

.ant-fullcalendar
  font-size 12px
  font-family Lato-Regular

.ant-fullcalendar-selected-day
  .ant-fullcalendar-date
    background #eff5fe
    color #3a7ce1
    &:hover
      background #e0efff
      color $blue-color

.ant-fullcalendar-today 
  &.ant-fullcalendar-date
    color #3a7ce1
    border-color #3a7ce1
    &:hover
      background #eff5fd
  &.ant-fullcalendar-selected-day
    .ant-fullcalendar-date
      background #eff5fd
      &:hover
        background $grey4
        font-weight bold
  &.ant-fullcalendar-disabled-cell
    .ant-fullcalendar-date
      background #f5f5f5
      &:hover
        background #f5f5f5

.ant-fullcalendar-date, .ant-time-picker-panel li
  color #5F6C87
  font-family Lato-Regular
  font-size 12px
  &.ant-time-picker-panel-addon-option-disabled
    color #a3a5af
  &:hover
    background #f6f6f6
  &:focus
    color $link-color

.ant-time-picker-panel li
  display flex
  align-items center

.ant-fullcalendar-disabled-cell .ant-fullcalendar-date
  background #f5f5f5

.ant-fullcalendar-disabled-cell.ant-fullcalendar-today .ant-fullcalendar-date
  color #a3a5af
  font-weight bold
  border-color transparent
  &:before
    border 1px solid #a3a5af

.ant-btn-default, .ant-calendar-today-btn 
  width 100%
  font-family Lato-Bold
  color $link-color
  text-align center
  font-size 14px
  margin 0
  padding 0
  text-transform none
  border: 0;
  span
    line-height 1.71
    letter-spacing 0.1px

.ant-btn:focus
  color: $link-color

.ant-btn:after
  display: none !important;

.ant-btn-background-ghost
  box-shadow: none
